<template>
  <div class="personal-space">
    <!-- 左侧导航 -->
    <div class="space-sidebar">
      <a-menu v-model:selectedKeys="selectedKeys" mode="inline" class="space-menu">
        <a-menu-item key="overview" @click="handleMenuClick('overview')">
          <template #icon><DashboardOutlined /></template>
          空间预览
        </a-menu-item>
        <a-menu-item key="pictures" @click="handleMenuClick('pictures')">
          <template #icon><PictureOutlined /></template>
          我的图片
        </a-menu-item>
        <a-menu-item key="files" @click="handleMenuClick('files')">
          <template #icon><FolderOutlined /></template>
          我的文件
        </a-menu-item>
        <a-menu-item key="shares" @click="handleMenuClick('shares')">
          <template #icon><ShareAltOutlined /></template>
          我的分享
        </a-menu-item>
        <a-menu-item key="favorites" @click="handleMenuClick('favorites')">
          <template #icon><StarOutlined /></template>
          我的收藏
        </a-menu-item>
        <a-menu-item key="likes" @click="handleMenuClick('likes')">
          <template #icon><HeartOutlined /></template>
          我的点赞
        </a-menu-item>
        <a-menu-item key="recycle" @click="handleMenuClick('recycle')">
          <template #icon><DeleteOutlined /></template>
          我的回收
        </a-menu-item>
      </a-menu>
    </div>

    <!-- 主内容区 -->
    <div class="space-content">
      <a-spin :spinning="loading">
        <router-view></router-view>
      </a-spin>
      <!-- 移除未定义的 handleBatchDownload 方法调用 -->
      <!-- <a-button @click="handleBatchDownload"> * </a-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { message } from 'ant-design-vue'
  import {
    DashboardOutlined,
    FolderOutlined,
    PictureOutlined,
    ShareAltOutlined,
    DeleteOutlined,
    StarOutlined,
    HeartOutlined,
  } from '@ant-design/icons-vue'

  const router = useRouter()
  const route = useRoute()

  // 加载状态
  const loading = ref(false)

  // 菜单选择状态
  const selectedKeys = ref<string[]>(['overview'])

  // 处理菜单点击
  const handleMenuClick = (key: string) => {
    selectedKeys.value = [key]
    router.push(`/user/space/${key}`)
  }

  // 初始化
  onMounted(() => {
    // 根据当前路由设置初始选中状态
    const path = route.path
    const key = path.split('/').pop() || 'overview'
    selectedKeys.value = [key]
  })
</script>

<style scoped>
  .personal-space {
    display: flex;
    min-height: 100vh;
    background: var(--theme-background);
    transition: all 0.3s ease;
  }

  .space-sidebar {
    width: 260px;
    background: var(--theme-surface);
    border-right: 1px solid var(--theme-border);
    padding: 0;
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: all 0.3s ease;
  }

  .space-menu {
    flex: 1;
    border-right: none;
    margin-top: 12px;
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  /* 深色主题下的菜单样式 */
  :deep(.ant-menu) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-menu-item) {
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-menu-item:hover) {
    background: var(--theme-background);
    color: var(--theme-primary);
  }

  :deep(.ant-menu-item-selected) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-menu-item-selected:hover) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-menu-item .anticon) {
    color: inherit;
  }

  .space-content {
    flex: 1;
    margin-left: 260px;
    padding: 12px;
    min-height: calc(100vh - 64px);
    background: var(--theme-background);
    transition: all 0.3s ease;
  }

  .pictures-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    padding: 0 16px;
  }

  .picture-card {
    aspect-ratio: 1;
    position: relative;
  }

  .picture-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .picture-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .picture-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    height: calc(100vh - 200px);
  }
</style>
